<template>
	<view class="shopping-banner">
		<view class="shopping-banner-content">
			<swiper
			    :current="0"
			   	:indicator-dots="false" 
			   	:autoplay="true" 
			   	:duration="500" 
			   	:interval="4000" 
			   	:circular="true" 
				>
			    <swiper-item class="swiper-item" v-for="(item,index) in bannerImgSrcArr" :key="index">
			        <a>
			            <image :src="item.ImgSrc" class="swiper_image"></image>
			        </a>
			    </swiper-item>
			
			
			</swiper>
		</view>
	</view>
</template>

<script setup>
		import { onMounted,ref,reactive } from 'vue'
 		// 引入基础轮播组件
	    import {Swiper, SwiperSlide} from 'swiper/vue';
	    // 引入分页，前进后退，立方体效果，自动循环 模块
	    import {Pagination, Navigation, EffectCube, Autoplay} from "swiper";
	    // 基础样式
	    import 'swiper/css';
	    // 立方体样式
	    import "swiper/css/effect-cube";
	    // 前进后退样式
	    import "swiper/css/navigation";
	    // 分页样式
	    import "swiper/css/pagination";
		
			// 设置 swiper 使用 分页，前进后退，立方体效果，自动循环 模块
		// let modules = ref([Pagination, Navigation, EffectCube, Autoplay])
		const bannerImgSrcArr = reactive([
			{
				order:1,
				ImgSrc:"../../../../../static/test-img/bg1.jpg"
			},
			{
				order:2,
				ImgSrc:"../../../../../static/test-img/bg2.jpg"
			},
			{
				order:3,
				ImgSrc:"../../../../../static/test-img/bg3.jpg"
			}
		]) 
		
		
</script>

<style lang="scss" scoped>
	uni-image{
		height: 100%;
	}
	.shopping-banner{
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 25rpx;
		width: 100%;
		>.shopping-banner-content{
			width: 90%;
			height: 270rpx;
			border-radius: 25rpx;
			overflow: hidden;
		}
	}
	
	uni-swiper{
		height: 100%;
	}

	.swiper_image{
		width: 100%;
	}
</style>